<template>
    <div class="inside-comment">
        <div class="layout">
            <ul class="notice-list">
                <li>
                    <a href="">
                        <el-icon><ArrowRight /></el-icon>
                        <p class="tit"></p>
                        <span class="time"></span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'   
</script>

<style lang="scss" scoped>
    .inside-comment {
        .layout {
            .notice-list {
                padding: 0;
                margin-top: px2rem(40);
                li {
                    height: 0.8rem;
                    margin-bottom: 0.15rem;
                    a {
                        width: 100%;
                        height: 100%;
                        background-color: #fff;
                        border-radius: 4px;
                        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                        box-sizing: border-box;
                        padding: 0 0.2rem;
                        display: flex;
                        align-items: center;
                        transition: all 0.3s;
                        &:hover {
                            box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.2);
                            transform: translateX(-10px);
                            .tit {
                                color: var(--el-color-primary);
                            }
                        }
                        i {
                            color: #C9C9C9;
                            font-size: 0.14rem;
                            margin-right: 0.1rem;
                        }
                        .tit {
                            flex: 1;
                            margin-right: 0.1rem;
                            font-size: 0.18rem;
                            line-height: 0.27rem;
                            max-height: 0.27rem;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: normal;
                            word-wrap: break-word;
                            -webkit-line-clamp: 1;
                            -webkit-box-orient: vertical;
                            display: -webkit-box;
                        }
                        .time {
                            color: #666;
                            font-size: 0.18rem;
                            line-height: 1;
                            display: block;
                        }
                    }
                }
            }
        }
    }
</style>